<template>
  <div :id="echarts" ref="echarts" class="echarts" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['data'],
  computed: {
    echarts() {
      return 'echarts' + (Math.random() * 100000).toFixed(0)
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (JSON.stringify(this.data) !== '{}') {
        this.drawEcharts(this.data)
      }
    })
  },
  watch: {
    data(newValue, oldval) {
      this.drawEcharts(newValue)
    },
  },

  methods: {
    // 基于准备好的dom，初始化echarts实例
    drawEcharts(val) {
      const myChart = echarts.init(document.getElementById(this.echarts))
      myChart.clear()
      let dataStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          shadowBlur: 0,
          shadowColor: '#203665',
        },
      }
      let datas = {
        value: 23,
        name: '通话饱和度',
      }
      myChart.setOption({
        backgroundColor: '#131415',
        title: [
          {
            text: '通话饱和度',
            left: '53%',
            top: '0',
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
          },
          {
            text: `${datas.value}%`,
            left: '53%',
            top: '20%',
            textStyle: {
              color: '#fff',
              fontSize: 20,
            },
          },
        ],
        series: [
          {
            type: 'pie',
            clockWise: false,
            radius: ['70%', '90%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            center: ['50%', '50%'],
            data: [
              // 100圆形
              {
                value: 100,
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: '#d03e93',
                        align: 'center',
                        fontSize: 20,
                        fontWeight: 'bold',
                      },
                      b: {
                        color: '#fff',
                        align: 'center',
                        fontSize: 16,
                      },
                    },

                    position: 'center',
                    show: true,
                    textStyle: {
                      fontSize: '14',
                      fontWeight: 'normal',
                      color: '#fff',
                    },
                  },
                },
                itemStyle: {
                  color: '#1E2B36',
                },
              },
              // 参数圆
              {
                value: datas.value,
                name: datas.name,
                // label: {
                //     normal: {
                //         rich: {
                //             a: {
                //                 color: '#fff',
                //                 align: 'center',
                //                 fontSize: 25,
                //                 fontWeight: 'bold',
                //             },
                //             b: {
                //                 color: '#fff',
                //                 align: 'center',
                //                 fontSize: 14,
                //             },
                //         },
                //         formatter: (params) => {
                //             return '{b|通话饱和度}\n\n' + '{a|' + params.value + '%}';
                //         },
                //         position: 'outside',
                //         show: true,
                //         textStyle: {
                //             fontSize: '14',
                //             fontWeight: 'normal',
                //             color: '#fff',
                //         },
                //     },
                // },
                itemStyle: {
                  normal: {
                    color: '#0794FE',
                    shadowColor: '#0794FE',
                    shadowBlur: 0,
                  },
                },
              },
              // 背景圆
              {
                value: 50,
                name: 'invisible',
                itemStyle: {
                  color: '#131415',
                },
              },
            ],
          },
        ],
      })
      window.addEventListener('resize', () => myChart.resize(), false)
    },
  },
}
</script>
<style lang="scss" scoped>
.echarts {
  display: flex;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  justify-content: center;
}
</style>
